<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no" name="viewport">
    <link rel="stylesheet" href="{{ asset('map/css/main.css')}}">
    <title>{{$cate->name}}</title>
    <style>
        html, body, #container {
            height: 100%;
            width: 100%;
        }

        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border:none;
            /*border: solid 1px #f5f5f5;*/
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #fff;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            margin-top:-5px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
</head>
<body onload="init()">
    <marquee behavior="scroll" direction="left" bgcolor="#ececec" id="systemNotifation">
        <font size="5">{{ array_get($systemNotifation,'msg','客服暂未收到路况信息   发现异常请直接上报至公众号 沪上司机帮 持续为您保驾护航！') }}</font>
    </marquee>
<!--地图-->
<div class="map-box" id="mapBox"></div>
<!--按钮-->

<div class="rt-box">
    <img src="{{$cate->thumb}}"  class="wechat-pic">
<!--<button type="button" class="map-btn wechat-btn"></button>
<button type="button" class="map-btn btn-vip qun-code">长按关注</button>-->
</div>

<a href="https://www.weizan.cn/f/s-1114306" class="traffic-btn chezhuzhijia">车主论坛</a>

<a href="{{url('traffic?category_id='.$cate->id)}}" class="traffic-btn">路况一览</a>
<button type="button" class="qun-btn kefu-code">路况群</button>
<!--弹框微信二维码-->
<div class="modal-pic modal-wechat">
    <img src="{{$cate->thumb}}" alt="" class="code-pic">
</div>
<!--/.弹框微信二维码-->

<!--弹框群-->
<div class="modal-pic modal-qun">
    <img src="{{$cate->thumb}}" alt="" class="code-pic">
</div>
<!-- /.弹框群-->

<!--弹框客服二维码-->
<div class="modal-pic modal-kefu">
    <img src="{{$cate->kefu_pic}}" alt="" class="code-pic">
</div>
<!-- /.弹框客服二维码-->

<!--视频-->
<div class="modal-pic modal-video">
    <video src="" controls="controls" width="400"></video>
</div>


<!--提示弹框-->
<div class="modal-tip">
    <p style="margin:20px 0 30px 0;text-align:center;font-size: 18px;font-weight: 700;">设置浮窗，实时路况尽在掌握</p>
    <p class="step-list">1.点击右上角 <img src="{{asset('map/images/share.jpg')}}" alt=""></p>
    <p class="step-list">1.选择左下角<img src="{{asset('map/images/fuchuang.jpg')}}" alt=""></p>
    <label class="checkbox-tip"><input type="checkbox" class="ifremind">不再提醒</label>
    <button type="button" class="know-btn">我知道了</button>
</div>
<!-- /.提示弹框-->
<!--弹框遮罩层-->
<div class="modal-back"></div>
<div class="modal-back-tip"></div>

<!--jquery-->
<script src="{{ asset('map/js/jquery-2.2.3.min.js') }}"></script>
<script defer src="{{ asset('js/freenbar.min.js') }}"></script>
<!--腾讯地图-->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=5HYBZ-Y2KLF-FFFJW-J6ZYO-G4QTK-4ZBJN"></script>
<script src="https://3gimg.qq.com/lightmap/components/geolocation/geolocation.min.js"></script>

<script>
    // 设置map盒子高度 监听屏幕变化实时更改高度
    $(window).bind('load resize', function () {
        var mapHeight = $(window).height();
        //设置map盒子高度
        $('.map-box').height(mapHeight)
    });

    $(document).ready(function () {

        //提示层 提示设置浮窗
        $('.know-btn').on('click', function () {
            $('.modal-back-tip').fadeOut();
            $('.modal-tip').fadeOut();
        });

        //不再提醒
        //checkbox值改变时存储localStorage的remind值
        $(".ifremind").on("change", function () {
            if ($('.ifremind').is(':checked')) {
                localStorage.remind = 1;
            } else {
                localStorage.remind = 0;
            }
        });

        var local_remind = localStorage.remind;//获取本地localStorage的remind值
        //根据本地localStorage的remind值判断是否显示提示层
        if (local_remind === 1) {
            $('.modal-back-tip').hide();
            $('.modal-tip').hide();
        } else {
            $('.modal-back-tip').show();
            $('.modal-tip').show();
        }


        //点击弹出微信二维码
        $('.wechat-btn').on('click', function () {
            $('.modal-back').fadeIn();
            $('.modal-wechat').fadeIn();
        });

        //点击弹出群二维码
        $(document).on('click', '.qun-code', function () {
            $('.modal-back').fadeIn();
            $('.modal-qun').fadeIn();
        });

        $(document).on('click','#systemNotifation', function () {
            $('.modal-back').fadeIn();
            $('.modal-qun').fadeIn();
        });

        //点击弹出客服二维码
        $(document).on('click','.kefu-code', function () {
            $('.modal-back').fadeIn();
            $('.modal-kefu').fadeIn();
        });


        $(document).on('click','.btn-video',function(){
            var video = '';
            video = $(this).data('video');
            if(video){
                window.location.href="https://www.weizan.cn/f/s-1114306?auth_time=636973401755215567";
            } else {
                $('#video').attr('src',video);
                $('.modal-back').fadeIn();
                $('.modal-video').fadeIn();    
            }
        });

        //点击弹框黑色背景隐藏弹框
        $('.modal-back').on('click', function () {
            $(".modal-back").fadeOut();
            $(".modal-pic").fadeOut();
        })


    });

    //创建地图
    var init = function() {
        var center = new qq.maps.LatLng(31.25197,121.456292);
        var map = new qq.maps.Map(document.getElementById('mapBox'),{
            center: center,
            zoom: 13
        });

        var geolocation = new qq.maps.Geolocation("OJ5BZ-2SKK4-DR6UI-XRMWT-T3F4S-J7BLZ", "myapp");
        if("geolocation in navigator"){
            geolocation.getLocation(showPosition, showError, {enableHighAccuracy:true, timeout: 6000,});
        }else{
            alert('地理位置服务不可用');
        }

        function showError(){
            alert('定位失败');
        }

    //当前定位信息
    function showPosition(poistion){
        var anchor = new qq.maps.Point(6,6);
        var size   = new qq.maps.Size(24, 24);
        var origin = new qq.maps.Point(0, 0);
        var icon   = new qq.maps.MarkerImage('http://lbs.qq.com/javascript_v2/img/center.gif', size, origin, anchor);

        //创建当前位置标记点
        var marker = new qq.maps.Marker({
            map:map,
            icon:icon
        });
        //获取移动位置
        geolocation.watchPosition(showWatchPosition);
        function showWatchPosition(position) {
            var myLatLng = new qq.maps.LatLng(position.lat,position.lng);
            marker.setPosition(myLatLng);
        }

        qq.maps.event.addListener(marker,'click',function () {
            infoWin.open();
            infoWin.setContent('<div style="text-align: center;white-space: nowrap;'+
            'margin: 10px;">当前位置:'+poistion.province+ poistion.city+ poistion.addr+'</div>' );
            infoWin.setPosition(new qq.maps.LatLng(poistion.lat,poistion.lng));
            map.panTo(new qq.maps.LatLng(poistion.lat,poistion.lng));
        });
    }
    //提示窗
    var infoWin = new qq.maps.InfoWindow({
        map: map
    });




    var latlngs = createPoints();


    for(var i = 0;i < latlngs.length; i++) {
        (function(n){
            console.info(latlngs[n].position);
            var anchor = new qq.maps.Point(6, 6),
            size = new qq.maps.Size(48, 48),
            origin = new qq.maps.Point(0, 0),
            icon = new qq.maps.MarkerImage('point/'+latlngs[n].status+'.gif', size, origin, anchor);
            var marker = new qq.maps.Marker({
                icon: icon,
                position: latlngs[n].position,
                map: map
            });
            qq.maps.event.addListener(marker, 'click', function() {
                infoWin.open();
                infoWin.setContent(latlngs[n].msg);
                infoWin.setPosition(latlngs[n].position);
            });
        })(i);
    }
    //qq.maps.event.addListener(map, 'click', jump);
    };


    //标记点
    function createPoints() {
        var data = [];
        @foreach($points as $p)
            var work_time = '';
            @if($p->is_new)
            work_time = '{{$p->work_time}}';
            @endif
            var point = '{{$p->lnglat}}'.split(',');
            data.push({
                position: new qq.maps.LatLng(point[1],point[0]),
                status:'{{$p->point_style}}',
                msg:'<div class="infoWindow"><button type="button" class="btn btn-{{$p->btn_style}}  btn-xs btn-video" data-video="{{$p->video}}"> {{$p->txt}} </button> <span> {{$p->pass_time}} -  {{$p->title}} </span></div>'
                });
        @endforeach
        return data;
    }
    </script>
</body>

</html>